<template>
  <div>
    <SearchTable
      :formItems="formItems"
      :columns="columns"
      :api="list"
      :scroll="{ x: true }"
      :beforeSearch="beforeSearch"
      ref="table"
    >
      <template #actions>
        <a-button @click="toCreate" type="primary">新增</a-button>
      </template>
      <template #action="{ text, record }">
        <a @click="toEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm
          :title="`确定 ${record.status == 0 ? '冻结' : '解冻'} 吗？`"
          @confirm="update(record.status == 0 ? 1 : 0, record)"
        >
          <a>{{ record.status == 0 ? '冻结' : '解冻' }}</a>
        </a-popconfirm>
        <!-- <a-divider type="vertical" />
        <a>重置密码</a> -->
      </template>
      <template #url="{ text, record }">
        <div>
          <a-tooltip v-if="text">
            <template #title>
              <QRCodeVue3
                :value="`http://${text}`"
                :width="100"
                :height="100"
              />
            </template>
            <a :href="`http://${text}`">{{ text }}</a>
          </a-tooltip>
          <span v-else>-</span>
        </div>
      </template>
    </SearchTable>
  </div>
</template>

<script>
  import { ref, toRefs, reactive } from 'vue';
  import QRCodeVue3 from 'qrcode-vue3';
  import { formItems, columns } from './config';
  import { list, updateStatus } from './api';
  import { useRouter } from 'vue-router';
  import { message } from 'ant-design-vue';

  export default {
    components: {
      QRCodeVue3,
    },
    data() {
      return {
        list,
        formItems,
        columns,
      };
    },
    setup(props, context) {
      const table = ref(null);
      const router = useRouter();
      function toCreate(query) {
        router.push({
          name: 'companycreate',
        });
      }

      function toEdit(record) {
        router.push({
          name: 'companyedit',
          params: {
            id: record.id,
          },
        });
      }

      const beforeSearch = (params) => {
        return {
          ...params,
          id: parseInt(params.id),
          company_id: parseInt(params.company_id),
        };
      };

      const update = (status, record) => {
        updateStatus({
          status,
          id: record.id,
        }).then((res) => {
          message.success('操作成功');
          table.value.load();
        });
      };

      return {
        toCreate,
        toEdit,
        beforeSearch,
        update,
        table,
      };
    },
  };
</script>
